// 牛叉诊股
import { defineComponent, reactive, ref } from "vue";
import { dxget } from "../../util/index";
export default defineComponent({
  props: {
    code: {
      type: [],
    },
  },
  setup(props, context) {
    let loading = ref(true);
    const segment = reactive({
      pre:0,
      label:"",
      data:[]
    })
    const initData = async () => {
      let { data }: any = await dxget("wc/blockDetail",{
        code:props.code
      });
      const components = data.txt[0].content.components;
  
      const segment1 = components.filter(
        (row) => row.show_type == "segment1"
      )[0];
      let jseer=  components.filter(
        (row) => row.show_type == "list1"
      )[0].data;  
      console.log( jseer)
      segment.data = jseer
   
      segment.pre = segment1.data.index.per*100
      segment.label = segment1.data.index.label
    };
    initData();
    return () => (
      <>
        <n-card title="牛叉诊股">
          <div class="pr mt40">
           <div class="f_b cen dfgdftt" style={{"left":segment.pre+"%"}}>
           
           {segment.label}
           <p> <span class={["propress-per",segment.pre>50?"red":"green"]}></span></p>
           </div>
          
          <n-progress
            type="line"
            percentage={segment.pre}
            color={segment.pre>50?"red":"green"}
            indicator-placement="inside"
            processing
          >
            </n-progress>
            </div>
          <div>
            <div class="display-flex ">
              <div class="flex-1">
                <span class="arrow_up"></span>
                <p>卖出</p>
              </div>
              <div class="flex-1 tr">
                <span class="arrow_up"></span>
                <p>买入</p>
              </div>
            </div>
          
          </div>
        </n-card>
      </>
    );
  },
});
